{% extends 'layout.html' %}
{% load custom_filters %}
{% block title %}巡检请求列表{% endblock %}
{% block content %}
<div class="row">
    {% if current_page %}
    <div class="col">
        <table class="table table-striped">
            <tr>
                <td>换电站名称</td>
                <td>监控通道名称</td>
                <td>巡检请求</td>
                <td>图片抓拍时间</td>
                <td>人工复核</td>
            </tr>
            {% for request in current_page %}
                <tr>
                    <td><a href="/ai_inspect/station/{{request.station_id}}">{{ request.station_name }}</a></td>
                    <td>{{ request.channel_name }}</td>
                    <td>{{ request.inspect_name }}</td>
                    <td>{{ request.photo_url|get_photo_time }}</a></td>
                    <td><a target="_blank" href="/ai_inspect/inspect_request/{{request.request_name}}/">{{ request.verification }}</a></td>
                </tr>
            {% endfor %}
        </table>
    </div>
    {% else %}
    <div class="col">
        <div class="alert alert-danger" role="alert">巡检请求列表为空</div>
    </div>
    {% endif %}
</div>
<!-- 分页控件 -->
    {% if paginator.num_pages > 1 %}  <!-- 只有多页时才显示分页 -->
    <div class="flex items-center justify-between border-t border-gray-200 px-4 py-3 sm:px-6">
        <!-- 分页信息 -->
        <div class="hidden sm:block">
            <p class="text-sm text-gray-700">
                显示第 <span class="font-medium">{{ current_page.number }}</span> 页，
                共 <span class="font-medium">{{ paginator.num_pages }}</span> 页，
                总计 <span class="font-medium">{{ paginator.count }}</span> 条记录
            </p>
        </div>

        <!-- 页码导航 -->
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            <!-- 上一页 -->
            {% if current_page.has_previous %}
                <a href="?page={{ current_page.previous_page_number }}"
                   class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">上一页</span>
                    <i class="fa fa-chevron-left text-xs"></i>
                </a>
            {% else %}
                <!-- 上一页不可用时禁用 -->
                <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-500 cursor-not-allowed">
                    <i class="fa fa-chevron-left text-xs"></i>
                </span>
            {% endif %}

            <!-- 页码列表（只显示当前页附近的页码） -->
            {% for num in current_page.paginator.page_range %}
                {% if current_page.number == num %}
                    <!-- 当前页 -->
                    <span class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        {{ num }}
                    </span>
                {% elif num > current_page.number|add:'-3' and num < current_page.number|add:'3' %}
                    <!-- 显示当前页前后2页 -->
                    <a href="?page={{ num }}"
                       class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        {{ num }}
                    </a>
                {% elif num == 1 or num == paginator.num_pages %}
                    <!-- 显示第一页和最后一页 -->
                    <a href="?page={{ num }}"
                       class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        {{ num }}
                    </a>
                {% elif num == current_page.number|add:'-3' or num == current_page.number|add:'3' %}
                    <!-- 显示省略号 -->
                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                        ...
                    </span>
                {% endif %}
            {% endfor %}

            <!-- 下一页 -->
            {% if current_page.has_next %}
                <a href="?page={{ current_page.next_page_number }}"
                   class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                    <span class="sr-only">下一页</span>
                    <i class="fa fa-chevron-right text-xs"></i>
                </a>
            {% else %}
                <!-- 下一页不可用时禁用 -->
                <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-500 cursor-not-allowed">
                    <i class="fa fa-chevron-right text-xs"></i>
                </span>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}